<style include="wallpaper common">
  :host {
    overflow: hidden;
  }

  iron-scroll-threshold,
  iron-list {
    width: 100%;
  }

  .row {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .row:focus-visible {
    outline: 0;
  }

  .photo-row-info {
    box-sizing: border-box;
    color: var(--cros-text-color-secondary);
    font: var(--cros-body-2-font);
    font-weight: 500;
    margin: 0;
    padding: calc(var(--personalization-app-grid-item-spacing) / 2);
    width: 100%;
  }

  .location {
    color: var(--cros-text-color-disabled);
    font-weight: 400;
    padding-inline-start: 12px;
  }

  .photos {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
  }

</style>
<iron-scroll-threshold id="gridScrollThreshold"
    on-lower-threshold="onGridScrollThresholdReached_" scroll-target="document">
  <iron-list id="grid" items="[[photosByRow_]]" as="row"
      scroll-target="document"
      aria-setsize$="[[getPhotosAriaSetSize_(photos_, photosByRow_)]]"
      role="listbox">
    <template>
      <div class="row" rowindex$="[[index]]" tabindex$="[[tabIndex]]"
          on-mousedown="onGridRowMouseDown_"
          on-focus="onGridRowFocused_"
          on-keydown="onGridRowKeyDown_">
        <template is="dom-if"
            if="[[isGridRowTitleVisible_(row, photosBySection_)]]">
          <p class="photo-row-info ellipsis">
            <span class="date">[[getGridRowDate_(row, photosBySection_)]]</span>
            <span class="location">
              [[getGridRowLocations_(row, photosBySection_)]]
            </span>
          </p>
        </template>
        <div class="photos">
          <template is="dom-repeat" items="[[row]]" as="photo">
            <wallpaper-grid-item
                aria-label$="[[getPhotoAriaLabel_(photo)]]"
                aria-posinset$="[[getPhotoAriaIndex_(photo.index)]]"
                class="photo"
                colindex$="[[index]]"
                disabled="[[isPhotoPlaceholder_(photo)]]"
                index="[[photo.index]]"
                is-google-photos
                on-wallpaper-grid-item-selected="onPhotoSelected_"
                photoindex$="[[photo.index]]"
                role="option"
                selected="[[isPhotoSelected_(photo, currentSelected_, pendingSelected_)]]"
                src="[[photo.url]]"
                tabindex="-1">
            </wallpaper-grid-item>
          </template>
        </div>
      </div>
    </template>
  </iron-list>
</iron-scroll-threshold>
